import Vue from "vue";
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from "./App.vue";
import router from "./router";
import store from "./store";
// import { registerMicroApps,start} from 'qiankun'
import { registerMicroApps, start } from './micro-fe';
import './styles/index.css'

Vue.config.productionTip = false;

Vue.use(ElementUI)

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

// 注册子应用
// 微前端的运行原理和 SPA 非常的相似
registerMicroApps([
  // 当匹配到activeRule的时候，请求获取entry资源，渲染到container中
  {
    name: "app-vue2",
    entry: "//localhost:8081",
    container: "#subapp-container",
    activeRule: '/subapp/app-vue2'
  },
  {
    name: "app-vue3",
    entry: "//localhost:8082",
    container: "#subapp-container",
    activeRule: '/subapp/app-vue3'
  },
  {
    name: "app-react",
    entry: "//localhost:8083",
    container: "#subapp-container",
    activeRule: '/subapp/app-react'
  }
])
// 启动 qiankun
start({
  sandbox: {
    // strictStyleIsolation: true // 使用 shadow dom 解决样式冲突
    experimentalStyleIsolation: true // 通过选择器来解决样式冲突
  }
});
